<template>
  <div class="todo-footer" v-show="total">
    <label>
      <!-- <input type="checkbox" :checked="isAll" @change="checkAll" /> -->
      <input type="checkbox" v-model="isAll" />
    </label>
    <span>
      <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props: ["todos"],
  computed: {
    //展示已完成数量
    doneTotal() {
      //arr.reduce(function(prev,cur,index,arr){
      // ...
      // }, init);
      //pre 累计器累计回调的返回值，表示上一次调用回调时的返回值，或者初始值 init;
      //current 表示当前正在处理的数组元素
      //index表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为0，否则起始索引为1；
      //arr表示原数组；
      //init，表示初始值
      //提供初始值，current 从数组第一项开始，若不提供初始值，
      //则 current 从第二项开始执行，对应的第一次 pre 是数组第一项的值
      return this.todos.reduce((pre, current, index) => {
        // console.log(pre, current, index);
        return pre + (current.done ? 1 : 0);
      }, 0);
    },
    //全部数量展示
    total() {
      return this.todos.length;
    },
    //判断是否全部完成，如果全部完成，则底部复选框✅，否则不✅上
    isAll: {
      get() {
        return this.doneTotal === this.total && this.total > 0;
      },
      set(value) {
        console.log(value);
        // this.checkAlTodo(value);
        this.$emit("checkAllTodo", value);
      },
    },
  },
  methods: {
    //全选或者全不选
    // checkAll(e) {
    //   console.log(e.target.checked);
    //   this.checkAlTodo(e.target.checked);
    // },
    //清除已完成任务
    clearAll() {
      // this.clearAllTodo();
      this.$emit("clearAllTodo");
    },
  },
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>
